<template>
    <div ref="chartContainer1"
        style="width: 100%; height:217px;"></div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, watch, defineEmits } from 'vue';
import * as echarts from 'echarts';
import { RequestStatisticGetRCAndDC } from "@/api/path/index.js";
export default defineComponent({
    setup() {
        // const emit = defineEmits(['widthWight'])
        // const echartsWidth = ref('')
        // const echartsHeight = ref('')
        const chartContainer1 = ref<HTMLElement | null>(null);
        let chartInstance: echarts.ECharts | null = null;
        const dateArr = ref<any>([])    //时间
        const collectArr = ref<any>([])    //收车
        const splitArr = ref<any>([])    //拆车
        const initChart = () => {
            RequestStatisticGetRCAndDC().then((res: any) => {
                dateArr.value = res.resultObj[0].dates
                res.resultObj.forEach((item: any) => {
                    if (item.name == '收车数') {
                        collectArr.value = item.nums
                    } else if (item.name == '拆车数') {
                        splitArr.value = item.nums
                    }
                });
                if (chartContainer1.value) {
                    chartInstance = echarts.init(chartContainer1.value);
                    // 设置ECharts选项
                    chartInstance.setOption({
                        legend: {
                            data: ['收车量', '拆车量'],
                            left: 'right',
                            top: 30,
                        },
                        grid: {
                            left: '3%',
                            right: '3%',
                            bottom: '6%',
                            containLabel: true,
                        },
                        xAxis: [
                            {
                                type: 'category',
                                axisTick: { show: false },
                                data: dateArr.value
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '收车量',
                                type: 'bar',
                                barGap: 0,
                                emphasis: {
                                    focus: 'series'
                                },
                                data: collectArr.value,
                                itemStyle: {
                                    color: '#165dff'
                                }
                            },
                            {
                                name: '拆车量',
                                type: 'bar',
                                emphasis: {
                                    focus: 'series'
                                },
                                data: splitArr.value,
                                itemStyle: {
                                    color: '#b1cbfe'
                                }
                            },
                        ],
                    });
                }
            })
        };

        const resizeChart = () => {
            if (chartInstance) {
                chartInstance.resize();
            }
        };

        onMounted(() => {
            // echartsWidth.value = chartContainer1!.offsetWidth + 'px'
            // echartsHeight.value = chartContainer1!.offsetHeight + 'px'
            // emit('widthWight', echartsWidth.value, echartsHeight.value)
            initChart();
            window.addEventListener('resize', resizeChart);
        });

        watch(chartContainer1, () => {
            if (chartInstance) {
                chartInstance.dispose(); // 销毁旧的实例
            }
            initChart();
        });
        return {
            chartContainer1,
        };
    },
});
</script>